<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="home-page">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle bg-circle-1"></div>
      <div class="bg-circle bg-circle-2"></div>
      <div class="bg-circle bg-circle-3"></div>
      <div class="bg-circle bg-circle-4"></div>
      <div class="bg-grid"></div>
      <div class="bg-stars"></div>
      <div class="bg-nebula"></div>
    </div>

    <AppLayout>
      <!-- 主内容区域 -->
      <div class="home-content">
        <!-- 英雄区：网站介绍 -->
        <section class="hero">
          <div class="hero-content">
            <div class="hero-icon">
              <div class="icon-glow"></div>
              <div class="icon-symbol">🎭</div>
              <div class="icon-particles">
                <div class="particle" v-for="i in 6" :key="i" :style="{ '--delay': `${i * 0.5}s` }"></div>
              </div>
            </div>
            <h1 class="hero-title">Echo Play 千音万语</h1>
            <h3 class="hero-subtitle">随时随地 和你喜欢的角色畅聊</h3>
            <p class="hero-subtitle">选择一个感兴趣的角色，发起对话，开启你的沉浸式交流之旅</p>
            <div class="hero-stats">
              <div class="stat-item">
                <div class="stat-number">{{ roles.length }}</div>
                <div class="stat-label">可用角色</div>
              </div>
              <div class="stat-divider"></div>
              <div class="stat-item">
                <div class="stat-number">24小时/7天</div>
                <div class="stat-label">在线服务</div>
              </div>
              <div class="stat-divider"></div>
              <div class="stat-item">
                <div class="stat-number">∞</div>
                <div class="stat-label">无限对话</div>
              </div>
            </div>
          </div>
        </section>

        <!-- 分类筛选 -->
        <section class="tabs-section">
          <div class="tabs-container">
            <transition-group name="tab" tag="div" class="tabs-wrapper">
              <button
                v-for="(tab, index) in tabs"
                :key="tab"
                class="tab-button"
                :class="{ 'active': activeTab === tab }"
                @click="activeTab = tab"
                :style="{ '--delay': `${index * 0.1}s` }"
              >
                <span class="tab-text">{{ tab }}</span>
                <div class="tab-glow" v-if="activeTab === tab"></div>
              </button>
            </transition-group>
          </div>
        </section>

        <!-- 角色网格 -->
        <section class="grid-section">
          <!-- 全局加载状态 -->
          <transition name="loading-fade">
            <div v-if="loadingRoles" class="global-loading">
              <div class="loading-spinner">
                <div class="spinner-ring"></div>
                <div class="spinner-ring"></div>
                <div class="spinner-ring"></div>
                <div class="spinner-inner"></div>
              </div>
              <div class="loading-text">正在加载角色数据...</div>
              <div class="loading-progress">
                <div class="progress-bar"></div>
              </div>
            </div>
          </transition>

          <!-- 角色网格容器 -->
          <transition name="grid-fade">
            <div v-if="!loadingRoles" class="roles-grid">
              <!-- 真实角色卡片 -->
              <transition-group name="card" tag="div" class="cards-container">
                <div
                  v-for="(role, index) in displayedRoles"
                  :key="role.id"
                  class="role-card"
                  :class="{ 'hovered': hoverId === role.id, 'creating': creating && creatingRoleId === role.id }"
                  @mouseenter="onHover($event, role.id)"
                  @mouseleave="onLeave($event)"
                  :style="{ '--delay': `${index * 0.08}s` }"
                >
                  <div class="card-cover" :style="coverStyle(role)">
                    <div class="card-overlay"></div>
                    <div class="card-shimmer"></div>
                    
                    <!-- 角色状态标识 -->
                    <div class="role-status-badge" v-if="role.isEnabled !== undefined">
                      <div class="status-dot" :class="{ 'online': role.isEnabled === 1 }"></div>
                      <span>{{ role.isEnabled === 1 ? '在线' : '离线' }}</span>
                    </div>

                    <!-- 卡片内容 -->
                    <div class="card-content">
                      <div class="role-info">
                        <div class="role-title">{{ role.roleName || '未命名角色' }}</div>
                        <div class="role-desc">{{ getIntro(role) }}</div>
                        <div class="role-tags">
                          <span v-if="role.languageCode" class="role-tag">{{ role.languageCode }}</span>
                          <span v-if="role.accent" class="role-tag">{{ role.accent }}</span>
                          <span v-if="role.style" class="role-tag">{{ role.style }}</span>
                        </div>
                      </div>
                    </div>

                    <!-- 悬浮操作按钮 -->
                    <transition name="action-fade">
                      <div class="card-action" v-show="hoverId === role.id">
                        <button 
                          class="chat-button" 
                          @click.stop="startChat(role)" 
                          :disabled="creating"
                          :class="{ 'loading': creating && creatingRoleId === role.id }"
                        >
                          <div class="button-content">
                            <div v-if="creating && creatingRoleId === role.id" class="button-loader">
                              <div class="loader-ring"></div>
                            </div>
                            <span v-else class="button-text">开始对话</span>
                          </div>
                          <div class="button-glow"></div>
                        </button>
                      </div>
                    </transition>
                  </div>

                  <!-- 卡片发光效果 -->
                  <div class="card-glow"></div>
                </div>
              </transition-group>

              <!-- 空数据占位 -->
              <transition name="fade">
                <div v-if="displayedRoles.length === 0 && !loadingRoles" class="empty-state">
                  <div class="empty-icon">🤖</div>
                  <div class="empty-title">暂无角色</div>
                  <div class="empty-desc">稍后再试或点击刷新重新加载</div>
                  <button class="refresh-button" @click="fetchEnabledRoles">
                    <span>刷新</span>
                    <div class="refresh-icon">🔄</div>
                  </button>
                </div>
              </transition>
            </div>
          </transition>
        </section>

        <!-- 特性介绍区域 -->
        <section class="features-section">
          <div class="features-container">
            <h2 class="features-title">为什么选择我们？</h2>
            <div class="features-grid">
              <div class="feature-card" v-for="(feature, index) in features" :key="feature.title" :style="{ '--delay': `${index * 0.2}s` }">
                <div class="feature-icon">{{ feature.icon }}</div>
                <h3 class="feature-title">{{ feature.title }}</h3>
                <p class="feature-desc">{{ feature.description }}</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 强大功能展示区域 -->
        <section class="capabilities-section">
          <div class="capabilities-container">
            <!-- 背景装饰 -->
            <div class="capabilities-bg">
              <div class="tech-grid"></div>
              <div class="floating-orbs">
                <div class="orb orb-1"></div>
                <div class="orb orb-2"></div>
                <div class="orb orb-3"></div>
              </div>
              <div class="data-streams">
                <div class="stream stream-1"></div>
                <div class="stream stream-2"></div>
                <div class="stream stream-3"></div>
              </div>
            </div>

            <!-- 主标题区域 -->
            <div class="capabilities-header">
              <div class="header-badge">
                <span class="badge-text">AI POWERED</span>
                <div class="badge-glow"></div>
              </div>
              <h2 class="capabilities-title">
                <span class="title-line">解锁无限可能</span>
                <span class="title-line">体验未来对话</span>
              </h2>
              <p class="capabilities-subtitle">
                基于前沿AI技术，为您提供超越想象的智能交互体验
              </p>
            </div>

            <!-- 功能展示网格 -->
            <div class="capabilities-grid">
              <!-- 智能对话 -->
              <div class="capability-card card-primary" :style="{ '--delay': '0s' }">
                <div class="card-bg-effect"></div>
                <div class="card-content">
                  <div class="capability-icon">
                    <div class="icon-container">
                      <div class="icon-symbol">🧠</div>
                      <div class="icon-pulse"></div>
                    </div>
                  </div>
                  <h3 class="capability-title">智能对话引擎</h3>
                  <p class="capability-desc">
                    采用最新GPT架构，理解上下文语境，提供人性化的深度交流体验
                  </p>
                  <div class="capability-stats">
                    <div class="stat">
                      <span class="stat-number">99.9%</span>
                      <span class="stat-label">准确率</span>
                    </div>
                    <div class="stat">
                      <span class="stat-number">&lt;100ms</span>
                      <span class="stat-label">响应时间</span>
                    </div>
                    <div class="stat">
                      <span class="stat-number">99%</span>
                      <span class="stat-label">回答准确率</span>
                    </div>
                  </div>
                </div>
                <div class="card-glow"></div>
              </div>

              <!-- 多模态交互 -->
              <div class="capability-card card-secondary" :style="{ '--delay': '0.2s' }">
                <div class="card-bg-effect"></div>
                <div class="card-content">
                  <div class="capability-icon">
                    <div class="icon-container">
                      <div class="icon-symbol">🎭</div>
                      <div class="icon-pulse"></div>
                    </div>
                  </div>
                  <h3 class="capability-title">多模态交互</h3>
                  <p class="capability-desc">
                    支持文字、语音、表情等多种交互方式，让对话更加生动自然
                  </p>
                  <div class="capability-features">
                    <span class="feature-tag">语音识别</span>
                    <span class="feature-tag">情感分析</span>
                    <span class="feature-tag">实时翻译</span>
                  </div>
                </div>
                <div class="card-glow"></div>
              </div>

              <!-- 个性化定制 -->
              <div class="capability-card card-tertiary" :style="{ '--delay': '0.4s' }">
                <div class="card-bg-effect"></div>
                <div class="card-content">
                  <div class="capability-icon">
                    <div class="icon-container">
                      <div class="icon-symbol">⚙️</div>
                      <div class="icon-pulse"></div>
                    </div>
                  </div>
                  <h3 class="capability-title">深度个性化</h3>
                  <p class="capability-desc">
                    AI学习您的偏好和习惯，提供量身定制的专属对话体验
                  </p>
                  <div class="capability-progress">
                    <div class="progress-item">
                      <span class="progress-label">学习适应</span>
                      <div class="progress-bar">
                        <div class="progress-fill" style="width: 95%"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-glow"></div>
              </div>
            </div>

            <!-- 技术指标展示 -->
            <div class="tech-metrics">
              <div class="metrics-grid">
                <div class="metric-item" v-for="(metric, index) in techMetrics" :key="metric.label" :style="{ '--delay': `${index * 0.1}s` }">
                  <div class="metric-icon">{{ metric.icon }}</div>
                  <div class="metric-value">{{ metric.value }}</div>
                  <div class="metric-label">{{ metric.label }}</div>
                  <div class="metric-glow"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </AppLayout>

    <!-- 粒子效果容器 -->
    <div class="particles-container" ref="particlesContainer"></div>

    <!-- 浮动元素 -->
    <div class="floating-elements">
      <div class="floating-shape shape-1"></div>
      <div class="floating-shape shape-2"></div>
      <div class="floating-shape shape-3"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import AppLayout from '@/layouts/AppLayout.vue';
import apiClient, { type ApiResponse } from '@/utils/api';

const router = useRouter();
const particlesContainer = ref<HTMLElement>();

// 分类标签
const tabs = ['推荐', '娱乐', '助手', '原创', '动漫与游戏', '小说与媒体', '图标'];
const activeTab = ref('推荐');

// 特性数据
const features = [
  {
    icon: '🚀',
    title: '实时响应',
    description: '基于先进AI技术，提供流畅自然的对话体验'
  },
  {
    icon: '🎨',
    title: '丰富角色',
    description: '多样化的角色设定，满足不同的对话需求'
  },
  {
    icon: '🔊',
    title: '语音交互',
    description: '支持语音对话，让交流更加生动真实'
  },
  {
    icon: '🌟',
    title: '个性定制',
    description: '智能学习用户偏好，提供个性化服务'
  },
  {
    icon: '🔒',
    title: '隐私安全',
    description: '端到端加密保护，确保对话内容安全私密'
  },
  {
    icon: '⚡',
    title: '极速部署',
    description: '云端智能调度，毫秒级响应，随时随地畅聊'
  }
];

// 技术指标数据
const techMetrics = [
  {
    icon: '🚀',
    value: '1M+',
    label: '日活用户'
  },
  {
    icon: '⚡',
    value: '50ms',
    label: '平均响应'
  },
  {
    icon: '🌐',
    value: '99.9%',
    label: '服务可用性'
  },
  {
    icon: '🎯',
    value: '95%',
    label: '用户满意度'
  },
  {
    icon: '🔄',
    value: '24小时/7天',
    label: '全天候服务'
  }
];

// 角色列表
interface AiRole {
  id: string;
  roleName?: string;
  roleDesc?: string;
  systemPrompt?: string;
  avatarUrl?: string;
  languageCode?: string;
  accent?: string;
  style?: string;
  emotion?: string;
  sortOrder?: number;
  created?: string;
  modified?: string;
  isEnabled?: number;
}

const roles = ref<AiRole[]>([]);
const loadingRoles = ref<boolean>(false);
const creating = ref<boolean>(false);
const creatingRoleId = ref<string>('');
const hoverId = ref<string | null>(null);

// 显示的角色（可以根据分类过滤）
const displayedRoles = computed(() => {
  if (activeTab.value === '推荐') {
    return roles.value.slice(0, 8); // 推荐显示前8个
  }
  return roles.value; // 其他分类显示全部
});

// 粒子动画
const particles: Array<{
  x: number;
  y: number;
  vx: number;
  vy: number;
  opacity: number;
  size: number;
}> = [];
let animationId: number;

const createParticles = () => {
  if (!particlesContainer.value) return;
  
  const container = particlesContainer.value;
  const rect = container.getBoundingClientRect();
  
  for (let i = 0; i < 30; i++) {
    particles.push({
      x: Math.random() * rect.width,
      y: Math.random() * rect.height,
      vx: (Math.random() - 0.5) * 0.3,
      vy: (Math.random() - 0.5) * 0.3,
      opacity: Math.random() * 0.3 + 0.1,
      size: Math.random() * 1.5 + 0.5
    });
  }
};

const animateParticles = () => {
  if (!particlesContainer.value) return;
  
  const container = particlesContainer.value;
  const rect = container.getBoundingClientRect();
  
  container.innerHTML = '';
  
  particles.forEach((particle) => {
    particle.x += particle.vx;
    particle.y += particle.vy;
    
    if (particle.x < 0 || particle.x > rect.width) particle.vx *= -1;
    if (particle.y < 0 || particle.y > rect.height) particle.vy *= -1;
    
    const dot = document.createElement('div');
    dot.className = 'particle';
    dot.style.left = particle.x + 'px';
    dot.style.top = particle.y + 'px';
    dot.style.opacity = particle.opacity.toString();
    dot.style.width = particle.size + 'px';
    dot.style.height = particle.size + 'px';
    
    container.appendChild(dot);
  });
  
  animationId = requestAnimationFrame(animateParticles);
};

// 本地 mock 数据
const buildMockRoles = (): AiRole[] => [
  {
    id: 'jackie_welles_2077',
    roleName: '尘世旅人',
    roleDesc: '行走诸国的旅人，擅长解谜与占卜。',
    systemPrompt: '保持温和、理性、耐心的口吻回答。',
    languageCode: 'zh-CN',
    accent: '普通话',
    style: 'chat',
    emotion: 'calm',
    sortOrder: 1,
    created: new Date().toISOString(),
    isEnabled: 1
  },
  {
    id: 'mock-02',
    roleName: '赤刃剑士',
    roleDesc: '外冷内热的剑士，直来直往。',
    systemPrompt: '回答简洁直接。',
    languageCode: 'ja-JP',
    accent: '关西',
    style: 'dramatic',
    emotion: 'serious',
    sortOrder: 2,
    created: new Date().toISOString(),
    isEnabled: 1
  },
  {
    id: 'mock-03',
    roleName: '档案管理员',
    roleDesc: '熟悉各类知识条目，善于引用典籍。',
    systemPrompt: '先给简要结论，再列要点。',
    languageCode: 'en-US',
    accent: 'Amer',
    style: 'narra',
    emotion: 'neutral',
    sortOrder: 3,
    created: new Date().toISOString(),
    isEnabled: 0
  },
  {
    id: 'mock-04',
    roleName: '星际探索者',
    roleDesc: '来自未来的时空旅行者，对科技充满好奇。',
    systemPrompt: '以科幻和未来视角回答问题。',
    languageCode: 'zh-CN',
    accent: '普通话',
    style: 'sci-fi',
    emotion: 'curious',
    sortOrder: 4,
    created: new Date().toISOString(),
    isEnabled: 1
  },
  {
    id: 'mock-05',
    roleName: '魔法学院导师',
    roleDesc: '博学的魔法师，精通各种魔法理论与实践。',
    systemPrompt: '以魔法世界的视角解释问题。',
    languageCode: 'zh-CN',
    accent: '普通话',
    style: 'fantasy',
    emotion: 'wise',
    sortOrder: 5,
    created: new Date().toISOString(),
    isEnabled: 1
  },
  {
    id: 'mock-06',
    roleName: '赛博朋克黑客',
    roleDesc: '生活在数字世界边缘的技术专家。',
    systemPrompt: '以网络文化和技术角度回答。',
    languageCode: 'en-US',
    accent: 'Tech',
    style: 'cyberpunk',
    emotion: 'cool',
    sortOrder: 6,
    created: new Date().toISOString(),
    isEnabled: 1
  }
];

onMounted(() => {
  fetchEnabledRoles();
  createParticles();
  animateParticles();
});

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
});

// 拉取可用的角色
const fetchEnabledRoles = async () => {
  loadingRoles.value = true;
  try {
    // 添加随机延迟模拟网络加载
    await new Promise(resolve => setTimeout(resolve, 800 + Math.random() * 1200));
    
    const response = await apiClient.get('/ai/role/query/enabled');
    const res = response.data as ApiResponse<AiRole[]>;
    
    if (res && res.success && Array.isArray(res.result) && res.result.length > 0) {
      roles.value = res.result;
    } else {
      roles.value = buildMockRoles();
    }
  } catch (error: unknown) {
    console.error('Failed to fetch roles:', error);
    roles.value = buildMockRoles();
  } finally {
    loadingRoles.value = false;
  }
};

// 获取简介文案
const getIntro = (role: AiRole): string => {
  const base = role.roleDesc || role.systemPrompt || '';
  if (base) return trimIntro(base);
  return '这个角色暂时没有简介。';
};

const trimIntro = (text: string, max = 80): string => {
  const t = text.replace(/\n+/g, ' ').trim();
  return t.length > max ? t.slice(0, max - 1) + '…' : t;
};

// 开始对话
const startChat = async (role: AiRole) => {
  if (creating.value) return;
  creating.value = true;
  creatingRoleId.value = role.id;
  
  try {
    // 先跳转到Chat页面，让Chat组件处理对话创建
    await router.push({ name: 'Chat', query: { roleId: role.id } });
  } catch (error) {
    console.error('跳转到聊天页面失败:', error);
  } finally {
    // 延迟重置状态，给Chat页面足够时间处理
    setTimeout(() => {
      creating.value = false; 
      creatingRoleId.value = '';
    }, 2000);
  }
};

// 悬浮事件
const onHover = (_evt: MouseEvent, id: string) => { hoverId.value = id; };
const onLeave = (_evt: MouseEvent) => { hoverId.value = null; };

// 头像/封面样式
const coverStyle = (role: AiRole) => role.avatarUrl
  ? { backgroundImage: `url(${role.avatarUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' }
  : { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' };
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,77,255,0.12), transparent), #0b0b0b;
  position: relative;
  overflow-x: hidden;
}

/* 主内容区域 */
.home-content {
  padding: 0;
  min-height: 100vh;
}

/* 背景装饰 */
.bg-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,77,255,0.08), rgba(167,139,250,0.04));
  filter: blur(2px);
  animation: float 35s infinite ease-in-out;
}

.bg-circle-1 {
  width: 600px;
  height: 600px;
  top: -300px;
  right: -300px;
  animation-delay: 0s;
}

.bg-circle-2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  left: -200px;
  animation-delay: -12s;
}

.bg-circle-3 {
  width: 300px;
  height: 300px;
  top: 30%;
  right: 10%;
  animation-delay: -24s;
}

.bg-circle-4 {
  width: 200px;
  height: 200px;
  top: 70%;
  left: 20%;
  animation-delay: -18s;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(124,77,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,77,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: grid-move 60s linear infinite;
}

.bg-stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.15), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(124,77,255,0.25), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(167,139,250,0.15), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(199,184,255,0.1), transparent);
  background-repeat: repeat;
  background-size: 200px 120px;
  animation: starsTwinkle 12s ease-in-out infinite;
}

.bg-nebula {
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 70% 20%, rgba(124,77,255,0.03), transparent),
              radial-gradient(600px 300px at 30% 80%, rgba(167,139,250,0.02), transparent);
  animation: nebulaShift 40s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-50px) rotate(120deg); }
  66% { transform: translateY(25px) rotate(240deg); }
}

@keyframes grid-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(80px, 80px); }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes nebulaShift {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* 英雄区 */
.hero {
  padding: 80px 24px 60px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 700px;
  margin: 0 auto;
  animation: heroFadeIn 1s ease-out;
}

.hero-icon {
  position: relative;
  display: inline-block;
  margin-bottom: 32px;
}

.icon-symbol {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: linear-gradient(135deg, #7c4dff, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  z-index: 3;
  box-shadow: 0 16px 48px rgba(124,77,255,0.4);
  animation: iconFloat 6s ease-in-out infinite;
}

.icon-glow {
  position: absolute;
  inset: -8px;
  background: linear-gradient(135deg, #7c4dff, #a78bfa);
  border-radius: 32px;
  filter: blur(16px);
  opacity: 0.7;
  z-index: 1;
  animation: iconPulse 4s ease-in-out infinite;
}

.icon-particles {
  position: absolute;
  inset: -20px;
  z-index: 2;
}

.icon-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #7c4dff;
  border-radius: 50%;
  animation: particleOrbit 8s linear infinite;
  animation-delay: var(--delay);
}

.icon-particles .particle:nth-child(1) { top: 0; left: 50%; }
.icon-particles .particle:nth-child(2) { top: 25%; right: 0; }
.icon-particles .particle:nth-child(3) { bottom: 0; right: 25%; }
.icon-particles .particle:nth-child(4) { bottom: 25%; left: 0; }
.icon-particles .particle:nth-child(5) { top: 25%; left: 0; }
.icon-particles .particle:nth-child(6) { top: 0; right: 25%; }

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes iconPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

@keyframes particleOrbit {
  0% { transform: rotate(0deg) translateX(60px) rotate(0deg); opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); opacity: 0; }
}

.hero-title {
  font-size: 52px;
  font-weight: 900;
  margin: 0 0 20px;
  background: linear-gradient(90deg, #c7b8ff, #7c4dff 40%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  line-height: 1.5;
  text-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hero-subtitle {
  color: #b5b5b5;
  font-size: 20px;
  margin: 0 0 40px;
  line-height: 1.6;
  font-weight: 300;
}

.hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
  animation: statFadeIn 0.8s ease-out;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: #7c4dff;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(124,77,255,0.3);
}

.stat-label {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #333, transparent);
}

/* 分类标签 */
.tabs-section {
  padding: 0 24px 60px;
  position: relative;
  z-index: 2;
}

.tabs-container {
  max-width: 900px;
  margin: 0 auto;
}

.tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.tab-button {
  position: relative;
  padding: 12px 24px;
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(124,77,255,0.2);
  border-radius: 24px;
  color: #b5b5b5;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease;
  animation: tabSlideIn 0.6s ease-out both;
  animation-delay: var(--delay);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.tab-button:hover {
  border-color: rgba(124,77,255,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124,77,255,0.2);
}

.tab-button.active {
  background: linear-gradient(135deg, rgba(124,77,255,0.2), rgba(167,139,250,0.1));
  border-color: rgba(124,77,255,0.5);
  color: #7c4dff;
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(124,77,255,0.3);
}

.tab-text {
  position: relative;
  z-index: 2;
}

.tab-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,77,255,0.1), rgba(167,139,250,0.05));
  border-radius: 24px;
  filter: blur(8px);
  z-index: 1;
  animation: tabGlow 2s ease-in-out infinite;
}

@keyframes tabGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* 角色网格 */
.grid-section {
  position: relative;
  z-index: 2;
  padding: 0 24px 80px;
  min-height: 400px;
}

/* 全局加载状态 */
.global-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  animation: loadingFadeIn 0.5s ease;
}

.loading-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 32px;
}

.spinner-ring {
  position: absolute;
  border: 4px solid transparent;
  border-radius: 50%;
  animation: spinnerRotate 2s linear infinite;
}

.spinner-ring:nth-child(1) {
  width: 80px;
  height: 80px;
  border-top-color: #7c4dff;
  animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
  width: 60px;
  height: 60px;
  top: 10px;
  left: 10px;
  border-right-color: #a78bfa;
  animation-delay: -0.5s;
}

.spinner-ring:nth-child(3) {
  width: 40px;
  height: 40px;
  top: 20px;
  left: 20px;
  border-bottom-color: #c7b8ff;
  animation-delay: -1s;
}

.spinner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  background: #7c4dff;
  border-radius: 50%;
  animation: spinnerPulse 1.5s ease-in-out infinite;
}

.loading-text {
  color: #7c4dff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  animation: textPulse 2s ease-in-out infinite;
}

.loading-progress {
  width: 200px;
  height: 4px;
  background: rgba(124,77,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c4dff, #a78bfa);
  border-radius: 2px;
  animation: progressMove 2s ease-in-out infinite;
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinnerPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes textPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes progressMove {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* 角色网格容器 */
.roles-grid {
  max-width: 1400px;
  margin: 0 auto;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

.role-card {
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124,77,255,0.15);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.5s ease;
  animation: cardSlideUp 0.8s ease-out both;
  animation-delay: var(--delay);
  position: relative;
  height: 600px;
  cursor: pointer;
}

.role-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(124,77,255,0.4);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.3),
    0 0 0 1px rgba(124,77,255,0.3) inset;
}

.role-card.hovered .card-shimmer {
  animation: shimmerMove 2s ease-in-out infinite;
}

.role-card.creating {
  animation: cardCreating 1.5s ease-in-out infinite;
}

.card-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(0,0,0,0.1) 0%, 
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%
  );
  z-index: 1;
}

.card-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.1) 50%,
    transparent 100%
  );
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role-card:hover .card-shimmer {
  opacity: 1;
}

@keyframes shimmerMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.role-status-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  font-size: 12px;
  color: #fff;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.1);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  transition: all 0.3s ease;
}

.status-dot.online {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76,175,80,0.6);
  animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.role-card .card-content {
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0;
  right: 0;
  padding: 24px;
  color: #fff;
  z-index: 3;
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    rgba(0,0,0,0.7) 50%,
    rgba(0,0,0,0.9) 100%
  );
  transform: translateY(0) !important;
}

.capability-card .card-content {
  position: relative;
  z-index: 2;
}

.role-info {
  margin-bottom: 12px;
}

.role-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  background: linear-gradient(90deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.role-desc {
  font-size: 14px;
  color: #e8e8e8;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.role-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.role-tag {
  background: rgba(124,77,255,0.2);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #c7b8ff;
  border: 1px solid rgba(124,77,255,0.3);
  transition: all 0.3s ease;
}

.role-tag:hover {
  background: rgba(124,77,255,0.3);
  transform: translateY(-1px);
}

.card-action {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: actionFadeIn 0.3s ease;
}

.chat-button {
  position: relative;
  background: linear-gradient(135deg, #7c4dff, #6a3cff);
  border: none;
  border-radius: 16px;
  color: #fff;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(124,77,255,0.4);
  overflow: hidden;
  min-width: 140px;
}

.chat-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(124,77,255,0.6);
}

.chat-button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

.chat-button.loading {
  background: rgba(124,77,255,0.8);
}

.button-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ring {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loaderSpin 1s linear infinite;
}

.button-text {
  white-space: nowrap;
}

.button-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.chat-button:hover:not(:disabled) .button-glow {
  opacity: 1;
}

@keyframes loaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(124,77,255,0.2), rgba(167,139,250,0.1));
  border-radius: 26px;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.role-card:hover .card-glow {
  opacity: 1;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  text-align: center;
  animation: emptyFadeIn 0.5s ease;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 24px;
  opacity: 0.6;
  animation: emptyIconFloat 3s ease-in-out infinite;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #aaa;
}

.empty-desc {
  font-size: 16px;
  margin-bottom: 32px;
  color: #777;
  max-width: 400px;
  line-height: 1.5;
}

.refresh-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,77,255,0.2);
  border: 1px solid rgba(124,77,255,0.4);
  border-radius: 12px;
  color: #7c4dff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-button:hover {
  background: rgba(124,77,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124,77,255,0.2);
}

.refresh-icon {
  transition: transform 0.3s ease;
}

.refresh-button:hover .refresh-icon {
  transform: rotate(180deg);
}

@keyframes emptyIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 强大功能展示区域 */
.capabilities-section {
  padding: 120px 24px;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(124,77,255,0.03) 50%, transparent 100%);
  overflow: hidden;
}

.capabilities-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 背景装饰 */
.capabilities-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.tech-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(124,77,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,77,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: techGridMove 30s linear infinite;
}

.floating-orbs {
  position: absolute;
  inset: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,77,255,0.2), rgba(167,139,250,0.1));
  filter: blur(2px);
  animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: -7s;
}

.orb-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 70%;
  animation-delay: -14s;
}

.data-streams {
  position: absolute;
  inset: 0;
}

.stream {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(124,77,255,0.6), transparent);
  animation: streamFlow 8s ease-in-out infinite;
}

.stream-1 {
  left: 20%;
  animation-delay: 0s;
}

.stream-2 {
  left: 50%;
  animation-delay: -2.5s;
}

.stream-3 {
  right: 25%;
  animation-delay: -5s;
}

/* 标题区域 */
.capabilities-header {
  text-align: center;
  margin-bottom: 80px;
  animation: headerFadeIn 1.2s ease-out;
}

.header-badge {
  display: inline-block;
  position: relative;
  padding: 8px 24px;
  border: 1px solid rgba(124,77,255,0.3);
  border-radius: 20px;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
  background: rgba(124,77,255,0.1);
}

.badge-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #a78bfa;
  text-transform: uppercase;
}

.badge-glow {
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(45deg, rgba(124,77,255,0.3), rgba(167,139,250,0.3));
  filter: blur(8px);
  z-index: -1;
  animation: badgePulse 3s ease-in-out infinite;
}

.capabilities-title {
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 24px;
  line-height: 1.2;
}

.title-line {
  display: block;
  background: linear-gradient(90deg, #ffffff, #a78bfa, #7c4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShimmer 3s ease-in-out infinite;
}

.title-line:nth-child(2) {
  animation-delay: 0.5s;
}

.capabilities-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 功能卡片网格 */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  margin-bottom: 80px;
}

.capability-card {
  position: relative;
  padding: 40px;
  border-radius: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(124,77,255,0.2);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: cardSlideIn 0.8s ease-out;
  animation-delay: var(--delay);
  animation-fill-mode: both;
}

.capability-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124,77,255,0.4);
  box-shadow: 0 20px 60px rgba(124,77,255,0.2);
}

.capability-card.card-primary {
  border-color: rgba(124,77,255,0.3);
}

.capability-card.card-secondary {
  border-color: rgba(167,139,250,0.3);
}

.capability-card.card-tertiary {
  border-color: rgba(199,184,255,0.3);
}

.card-bg-effect {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,77,255,0.05), rgba(167,139,250,0.02));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.capability-card:hover .card-bg-effect {
  opacity: 1;
}

.card-content {
  position: relative;
  z-index: 2;
}

.capability-icon {
  margin-bottom: 24px;
}

.icon-container {
  position: relative;
  display: inline-block;
}

.icon-symbol {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7c4dff, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  z-index: 2;
  animation: iconRotate 10s linear infinite;
}

.icon-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  background: linear-gradient(135deg, #7c4dff, #a78bfa);
  filter: blur(12px);
  opacity: 0.6;
  z-index: 1;
  animation: iconPulseAnim 2s ease-in-out infinite;
}

.capability-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
}

.capability-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* 统计数据 */
.capability-stats {
  display: flex;
  gap: 50px;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #7c4dff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 功能标签 */
.capability-features {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
}

.feature-tag {
  padding: 6px 12px;
  background: rgba(124,77,255,0.2);
  border: 1px solid rgba(124,77,255,0.3);
  border-radius: 12px;
  font-size: 12px;
  color: #a78bfa;
  font-weight: 500;
}

/* 进度条 */
.capability-progress {
  space-y: 12px;
}

.progress-item {
  margin-bottom: 12px;
}

.progress-label {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c4dff, #a78bfa);
  border-radius: 3px;
  animation: progressFill 2s ease-out;
}

.capability-card .card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(45deg, rgba(124,77,255,0.3), rgba(167,139,250,0.3));
  filter: blur(20px);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.capability-card:hover .card-glow {
  opacity: 0.6;
}

.card-primary .card-glow {
  background: linear-gradient(45deg, rgba(124,77,255,0.4), rgba(124,77,255,0.2));
}

.card-secondary .card-glow {
  background: linear-gradient(45deg, rgba(167,139,250,0.4), rgba(167,139,250,0.2));
}

.card-tertiary .card-glow {
  background: linear-gradient(45deg, rgba(199,184,255,0.4), rgba(199,184,255,0.2));
}

/* 技术指标 */
.tech-metrics {
  margin-top: 60px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.metric-item {
  position: relative;
  text-align: center;
  padding: 32px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(124,77,255,0.15);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  animation: metricFadeIn 0.6s ease-out;
  animation-delay: var(--delay);
  animation-fill-mode: both;
}

.metric-item:hover {
  transform: translateY(-4px);
  border-color: rgba(124,77,255,0.3);
}

.metric-icon {
  font-size: 32px;
  margin-bottom: 16px;
  animation: metricIconFloat 3s ease-in-out infinite;
}

.metric-value {
  font-size: 28px;
  font-weight: 900;
  color: #7c4dff;
  margin-bottom: 8px;
  animation: metricValueCount 2s ease-out;
}

.metric-label {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.metric-glow {
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(45deg, rgba(124,77,255,0.2), rgba(167,139,250,0.2));
  filter: blur(8px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.metric-item:hover .metric-glow {
  opacity: 1;
}

/* 特性介绍区域 */
.features-section {
  padding: 80px 24px;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.features-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
  background: linear-gradient(90deg, #c7b8ff, #7c4dff 40%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.feature-card {
  padding: 40px 30px;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124,77,255,0.15);
  border-radius: 20px;
  transition: all 0.4s ease;
  animation: featureSlideUp 0.8s ease-out both;
  animation-delay: var(--delay);
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124,77,255,0.3);
  box-shadow: 0 20px 40px rgba(124,77,255,0.1);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 8px rgba(124,77,255,0.2));
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.feature-desc {
  font-size: 14px;
  color: #b5b5b5;
  line-height: 1.6;
  margin: 0;
}

/* 粒子效果 */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  background: rgba(124,77,255,0.6);
  border-radius: 50%;
  pointer-events: none;
}

/* 浮动元素 */
.floating-elements {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,77,255,0.1), rgba(167,139,250,0.05));
  filter: blur(1px);
  animation: shapeFloat 20s ease-in-out infinite;
}

.shape-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: -7s;
}

.shape-3 {
  width: 80px;
  height: 80px;
  bottom: 30%;
  left: 20%;
  animation-delay: -14s;
}

@keyframes shapeFloat {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  25% { transform: translateY(-30px) translateX(20px) rotate(90deg); }
  50% { transform: translateY(-60px) translateX(0px) rotate(180deg); }
  75% { transform: translateY(-30px) translateX(-20px) rotate(270deg); }
}

/* 动画定义 */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loadingFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardCreating {
  0%, 100% {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(124,77,255,0.3);
  }
  50% {
    transform: translateY(-16px) scale(1.04);
    box-shadow: 0 30px 60px rgba(124,77,255,0.5);
  }
}

@keyframes actionFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes emptyFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes featureSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画定义 */
@keyframes techGridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-30px) rotate(120deg); }
  66% { transform: translateY(15px) rotate(240deg); }
}

@keyframes streamFlow {
  0% { transform: translateY(-100px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(calc(100vh + 100px)); opacity: 0; }
}

@keyframes headerFadeIn {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes badgePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes titleShimmer {
  0%, 100% { background-position: -200% center; }
  50% { background-position: 200% center; }
}

@keyframes cardSlideIn {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes iconRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes iconPulseAnim {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

@keyframes progressFill {
  0% { width: 0%; }
  100% { width: var(--width, 95%); }
}

@keyframes metricFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes metricIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes metricValueCount {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* 过渡动画 */
.loading-fade-enter-active,
.loading-fade-leave-active {
  transition: all 0.5s ease;
}

.loading-fade-enter-from,
.loading-fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.grid-fade-enter-active,
.grid-fade-leave-active {
  transition: all 0.6s ease;
}

.grid-fade-enter-from,
.grid-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.card-enter-active,
.card-leave-active {
  transition: all 0.5s ease;
}

.card-enter-from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}

.card-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
}

.tab-enter-active,
.tab-leave-active {
  transition: all 0.3s ease;
}

.tab-enter-from,
.tab-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.action-fade-enter-active,
.action-fade-leave-active {
  transition: all 0.3s ease;
}

.action-fade-enter-from,
.action-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero {
    padding: 60px 20px 40px;
  }
  
  .hero-title {
    font-size: 40px;
  }
  
  .hero-subtitle {
    font-size: 18px;
  }
  
  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .tabs-section {
    padding: 0 20px 40px;
  }
  
  .grid-section {
    padding: 0 20px 60px;
  }
  
  .cards-container {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
  
  .role-card {
    height: 280px;
  }
  
  .tabs-wrapper {
    gap: 12px;
  }
  
  .capabilities-section {
    padding: 80px 16px;
  }
  
  .capabilities-title {
    font-size: 36px;
  }
  
  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .capability-card {
    padding: 32px 24px;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .features-section {
    padding: 60px 20px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .features-title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 16px 30px;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .icon-symbol {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }
  
  .tabs-section {
    padding: 0 16px 30px;
  }
  
  .grid-section {
    padding: 0 16px 40px;
  }
  
  .cards-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .role-card {
    height: 260px;
  }
  
  .tabs-wrapper {
    gap: 8px;
  }
  
  .tab-button {
    padding: 10px 16px;
    font-size: 12px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-label {
    font-size: 12px;
  }
  
  .features-section {
    padding: 40px 16px;
  }
}
</style>